new Vue({
    el: "#app",
    data: function () {
        return {
            dialogTableVisible: false,
            list: [
            ],
            nowEditItem: {}
        }
    },
    watch: {
        // 监听list变化
        list: {
            handler(newList) {
                // 当数据发生变化后，保存到浏览器本地缓存中
                localStorage.setItem("list", JSON.stringify(newList))
            },
            deep: true
        }
    },
    mounted() {
        // 首次加载从浏览器本地缓存读取数据
        const o = localStorage.getItem("list")
        if (o) {
            this.list = JSON.parse(o)
        }
    },
    computed: {
        // 数据排序后展示，先按照时间排序（时间越小越靠前），如果时间相同则按照id排序（id越小越靠前）
        sortList() {
            return this.list.sort((i1, i2) => {
                if (i1.time !== i2.time) {
                    return i1.time > i2.time ? 1 : -1
                }
                return i1.id > i2.id ? 1 : -1
            })
        }
    },
    methods: {
        // 点击添加按钮，弹出新增框
        addItem() {
            this.nowEditItem = { time: moment().format('YYYY/MM/DD') }
            this.dialogTableVisible = true
        },
        // 点击某一项，弹出修改框
        updateItem(item) {
            this.nowEditItem = { ...item }
            this.dialogTableVisible = true
        },
        // 点击保存按钮，根据是否有id判断是新增还是修改
        save() {
            let { id, time, content } = this.nowEditItem
            // 数据验证，time和content不能为空
            if (!time) {
                this.$message({
                    message: '请选择时间',
                    type: 'warning'
                });
                return
            }
            if (!content) {
                this.$message({
                    message: '请输入内容',
                    type: 'warning'
                });
                return
            }
            if (id) {
                // id存在，修改
                const item = this.list.find(i => i.id === id)
                item.time = time
                item.content = content
            } else {
                // id不存在，新增
                id = new Date().getTime()
                this.list.push({ id, time, content })
            }
            this.dialogTableVisible = false
        },
        // 点击删除按钮，删除
        remove() {
            this.list = this.list.filter(i => i.id !== this.nowEditItem.id)
            this.dialogTableVisible = false
        }
    }
})